<template>
	<view :class="['page',isPC ? 'isPC' : 'small']">
		<match-media :max-width="MAX_SIZEiZE - 1">
			<uni-nav-bar fixed statusBar backgroundColor="transparent" :border="false" @clickLeft="handleClose">
				<block slot="left">
					<image src="/static/image/auth/back.png" style="width: 44rpx;" mode="widthFix">
					</image>
				</block>
				<view class="title">{{curType === 0?$t('Page.component.login'):$t('Page.component.zc')}}</view>
			</uni-nav-bar>
		</match-media>
		<view class="auth-page">
			<view :class="['auth-right',{'auth-right-bg bg-shadow': isPC}]"
				:style="{width: isPC ? '644px' : '100vw',padding:isPC ?'60px':'15px'}">
				<view class="login-type">
					<view :class="['default','login','active']">
						{{$t('Page.auth.hyhl')}}
					</view>
				</view>
				<view class="default continue">
					{{curType === 1?$t('Page.component.zc'):$t('Page.component.login')}} {{$t('Page.auth.jx')}}
				</view>
				<uni-forms :border="false" :style="{width: isPC ? '488px' : 'calc(100vw - 140rpx)'}"
					v-if="curType === 0" ref="customForm" :rules="loginRules" :modelValue="loginForm"
					validateTrigger="blur">

					<uni-forms-item required name="username">
						<uni-easyinput maxlength="30" :inputBorder="false" :primaryColor="`var(--border-color-2)`"
							v-model.trim="loginForm.username" :placeholder="$t('Page.auth.yhm')" :clearable="false"
							@confirm="submit('customForm')" />
					</uni-forms-item>
					<uni-forms-item required name="password">
						<uni-easyinput maxlength="30" :primaryColor="`var(--border-color-2)`" type="password"
							v-model.trim="loginForm.password" :placeholder="$t('Page.auth.mima')"
							@confirm="submit('customForm')" />
					</uni-forms-item>
					<uni-forms-item required name="verifyCode" label-width="0">
						<view class="verify-wrap">
							<uni-easyinput type="number" maxlength="4" :primaryColor="`var(--border-color-2)`"
								v-model.trim="loginForm.verifyCode" :placeholder="$t('Page.auth.yzm')"
								:clearable="false" @confirm="submit('customForm')" />
							<view class="xz-code-wrap">
								<xz-code :xzWidth="90" :xzHeight="40" :xzCount="4" @result="refreshCode"></xz-code>
							</view>
						</view>
					</uni-forms-item>
					<button :class="['submit-btn',isPC?'btn-with':'']" type="primary"
						@click="submit('customForm')">{{$t('Page.component.login')}}</button>
					<!-- <button class="forget" style="color:#ffffff;background-color:transparent;border:none;box-shadow: none;"
						@click="forgotOpen"> {{$t('Page.auth.wjmm')}} </button> -->
					<view class="tips">
						{{$t('Page.auth.hmzh')}}<text class="tips-color" @click="changeType(1)">
							{{$t('Page.component.zc')}}</text>
					</view>
				</uni-forms>

				<uni-forms :style="{width: isPC ? '488px' : 'calc(100vw - 140rpx)'}" v-else-if="curType === 1"
					ref="regFormRef" :rules="regRules" :modelValue="regForm" validateTrigger="blur">
					<!-- 	<view class="login-type">
						<view :class="['default','login',{'active': curType === 0}]" @click="changeType(0)">
							{{$t('Page.component.login')}}
						</view>
						<view :class="['default',{'active': curType === 1}]" @click="changeType(1)">
							{{$t('Page.component.zc')}}
						</view>
					</view> -->
					<!-- 	<uni-forms-item required label-width="0">
						<view style="display: flex;">
							<view class="arearCode-wrap" @click="openPupup">
								<uni-easyinput  :primaryColor="`var(--border-color-2)`"
									v-model.trim="regForm.arearCode" :clearable="false">
								</uni-easyinput>
								<view :class="['triangle',{'triangle-rotate':isOpen}]"></view>
								<view v-if="isOpen">
									<view class="arear-pupup">
										<view class="item" v-for="(item,index) in arearList" :key="'arearList'+index"
											@click.stop="selectArear(item)">
											+{{item.code}} {{item.name}}
										</view>
									</view>
								</view>
							</view>
							<uni-easyinput  type="number" :primaryColor="`var(--border-color-2)`"
								v-model.trim="regForm.phone" placeholder="Phone Number" :clearable="false" />
						</view>
					</uni-forms-item> -->
					<uni-forms-item required name="username">
						<uni-easyinput maxlength="30" ::primaryColor="`var(--border-color-2)`"
							v-model.trim="regForm.username" :placeholder="$t('Page.auth.yhm')" :clearable="false"
							@confirm="regSubmit('regFormRef')" />
					</uni-forms-item>


					<uni-forms-item required name="password" ref="password">
						<uni-easyinput type="password" ::primaryColor="`var(--border-color-2)`"
							v-model.trim="regForm.password" :placeholder="$t('Page.auth.mima')"
							@confirm="regSubmit('regFormRef')" />
					</uni-forms-item>
					<uni-forms-item required name="confrimPassword">
						<uni-easyinput type="password" :primaryColor="`var(--border-color-2)`"
							v-model.trim="regForm.confrimPassword" :placeholder="$t('Page.auth.qrmm')"
							@confirm="regSubmit('regFormRef')" />
					</uni-forms-item>

					<uni-forms-item required name="verifyCode" label-width="0">
						<view class="verify-wrap">
							<uni-easyinput type="number" maxlength="4" :primaryColor="`var(--border-color-2)`"
								v-model.trim="regForm.verifyCode" :placeholder="$t('Page.auth.yzm')" :clearable="false"
								@confirm="regSubmit('regFormRef')" />
							<view class="xz-code-wrap">
								<xz-code :xzWidth="90" :xzHeight="40" :xzCount="4" @result="refreshCode"></xz-code>
							</view>
						</view>
						<!-- 		<view class="verify-wrap">
							<uni-easyinput type="number" maxlength="4" 
								:primaryColor="`var(--border-color-2)`" v-model.trim="regForm.code" placeholder="Verification Code"
								:clearable="false" />
							<view class="sent-btn" @click="handleSend">
								<waves>
									<view class="send">
										{{$t('Page.auth.zcfs')}}
									</view>
								</waves>
							</view>
						</view> -->
					</uni-forms-item>
					<uni-forms-item required name="invited">
						<uni-easyinput type="text" :primaryColor="`var(--border-color-2)`"
							v-model.trim="regForm.invited" :placeholder="$t('Page.auth.yqm')"
							@confirm="regSubmit('regFormRef')" />
					</uni-forms-item>
					<button :class="['submit-btn',isPC?'btn-with':'']" type="primary"
						@click="regSubmit('regFormRef')">{{$t('Page.auth.ksyx')}}</button>
					<view class="tips">
						{{$t('Page.auth.yyzh')}}<text class="tips-color" @click="changeType(0)">
							{{$t('Page.component.login')}}</text>
					</view>
				</uni-forms>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	import XzCode from '@/components/xz-code/xz-code.vue' // 引入验证码组件
	import {
		authRegisterApi
	} from '@/api/auth.js'
	import {
		sendMessage
	} from '@/api/websocket.js'
	import {
		mapActions,
		mapMutations
	} from 'vuex'
	import {
		passwordReg
	} from '@/utils/function/reg.js'
	import {
		getHeartbeatAgain
	} from '@/api/websocket.js'
	export default {
		components: {},
		data() {
			return {
				MAX_SIZEiZE,
				loginRules: {
					username: {
						rules: [{
								required: true,
								errorMessage: this.$t('Page.auth.yhmbnwk')
							},
							{
								validateFunction: (rule, value, data, callback) => {
									if (value.length < 6) {
										callback(this.$t('Page.auth.zhxz'));
									}
									return true
								}
							}
						]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: this.$t('Page.auth.mmbnwk')
						}, {
							validateFunction: (rule, value, data, callback) => {
								if (value.length < 8) {
									callback(this.$t('Page.auth.mmcd'));
								} else if (passwordReg(value)) {
									callback(this.$t('Page.auth.mmreg')); // 纯数字或纯字母或包含数字、字母和小数点的组合
								}
								return true
							}
						}]
					},
					verifyCode: {
						rules: [{
								required: true,
								errorMessage: this.$t('Page.auth.sryzm')
							},
							{
								validateFunction: (rule, value, data, callback) => {
									if (value !== this.curVerifyCode) {
										callback(this.$t('Page.auth.yzmbd'));
									}
									return true
								}
							}
						]
					}
				},
				loginForm: {
					username: '',
					password: '',
					verifyCode: ''
				},
				regRules: {
					username: {
						rules: [{
								required: true,
								errorMessage: this.$t('Page.auth.yhmbnwk')
							},
							{
								validateFunction: (rule, value, data, callback) => {
									if (value.length < 6) {
										callback(this.$t('Page.auth.zhxz'));
									}
									return true
								}
							}
						]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: this.$t('Page.auth.mmbnwk')
						}, {
							validateFunction: (rule, value, data, callback) => {
								if (value.length < 8) {
									callback(this.$t('Page.auth.mmcd'));
								} else if (passwordReg(value)) {
									callback(this.$t('Page.auth.mmreg')); // 纯数字或纯字母或包含数字、字母和小数点的组合
								}
								return true
							}
						}]
					},
					confrimPassword: {
						rules: [{
							required: true,
							errorMessage: this.$t('Page.auth.srqrmm')
						}, {
							validateFunction: (rule, value, data, callback) => {
								if (value.length < 8) {
									callback(this.$t('Page.auth.mmcd'));
								} else if (passwordReg(value)) {
									callback(this.$t('Page.auth.mmreg')); // 纯数字或纯字母或包含数字、字母和小数点的组合
								} else if (value !== this.regForm.password) {
									callback(this.$t('Page.auth.mmbyz'))
								}
								return true
							}
						}]
					},
					verifyCode: {
						rules: [{
								required: true,
								errorMessage: this.$t('Page.auth.sryzm')
							},
							{
								validateFunction: (rule, value, data, callback) => {
									if (value !== this.curVerifyCode) {
										callback(this.$t('Page.auth.yzmbd'));
									}
									return true
								}
							}
						]
					}
				},
				regForm: {
					username: '',
					password: '',
					confrimPassword: '',
					verifyCode: '',
					code: '666666',
					invited: '',
					type: '1',
				},
				curVerifyCode: '',
				forgotRules: {
					username: {
						rules: [{
							required: true,
							errorMessage: this.$t('Page.auth.yhmbnwk')
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: this.$t('Page.auth.yzmbnwk')
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: this.$t('Page.auth.mmbnwk')
						}]
					},
					newpassword: {
						rules: [{
							required: true,
							errorMessage: this.$t('Page.auth.qrmmbnwk')
						}, {
							validateFunction: (rule, value, data, callback) => {
								if (passwordReg(value)) {
									callback(this.$t('Page.auth.mmreg')); // 纯数字或纯字母或包含数字、字母和小数点的组合
								}
								return true
							}
						}]
					},

				},
				forgotForm: {
					username: '',
					password: '',
					newpassword: '',
					code: ''
				},
				curType: 0,
				toggleText: 'SunCity',
				regErr: [],
				isOpen: false,
				arearList: [],
				isPC: false,
			}
		},
		// // #ifdef APP-PLUS
		// onShow() {
		// 	this.curType = 0
		// },
		// // #endif

		onLoad(option) {
			this.setLeftPageWidth('suoxiao')
			this.curType = parseInt(option.type)
			if (option.invited) {
				this.regForm.invited = option.invited
			}
		},
		onShow() {
			this.saveToken('');
			this.saveUserInfo('');
			uni.removeStorageSync('isHasShow');
			uni.removeStorageSync('msgCurrent');
			console.log(365, uni.getStorageSync('isHasShow'), uni.getStorageSync('msgCurrent'));
		},
		onUnload() {
			this.setLeftPageWidth('huanyuan')
		},
		mounted() {
			// #ifdef H5
			this.isPC = this.IsPC()
			// #endif 
		},
		methods: {
			...mapActions('app', ['getUserInfo']),
			...mapMutations('app', ['setLeftPageWidth', 'saveUserInfo', 'saveToken', 'saveActiveTab']),
			handleSend() {},
			// #ifdef H5
			IsPC() {
				var userAgentInfo = navigator.userAgent;
				var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
				var flag = true;
				for (let v = 0; v < Agents.length - 1; v++) {
					if (userAgentInfo.indexOf(Agents[v]) > 0) {
						flag = false;
						break;
					}
				}
				return flag;
			},
			// #endif 

			forgotOpen() {
				if (!this.isPC) {
					this.$refs.popup.open('bottom')
				} else {
					this.$refs.popup.open()
				}
			},

			forgotClose() {
				this.$refs.popup.close()
			},


			/**
			 * 刷新验证码，更新图形验证码上的数字
			 * @param {Object} event
			 */

			refreshCode(event) {
				this.curVerifyCode = event.detail.text
			},
			/**
			 * 选择区号
			 * @param {Object} item
			 */
			selectArear(item) {
				this.regForm.arearCode = item.code
				this.isOpen = false
			},

			/**
			 * 
			 */
			openPupup() {
				this.isOpen = !this.isOpen
			},

			/**
			 * 返回上一页
			 */
			handleClose() {
				uni.switchTab({
					url: '/pages/tabBar/home/index'
				})
			},

			/**
			 * 切换登录注册选项
			 * @param {Object} index
			 */
			changeType(index) {
				this.curType = index
				const arr = ['SunCity', 'Back']
				this.toggleText = arr[index]
			},
			/**
			 * 登录表单提交
			 * @param {Object} ref
			 */
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					const {
						LOGIN
					} = this.$api
					sendMessage({
						flag: LOGIN,
						content: {
							username: this.loginForm.username,
							password: this.loginForm.password
						}
					})
					uni.$once(LOGIN, (e) => {
						if (e.code === 1) {
							this.saveActiveTab(0)
							uni.setStorageSync('curMenuPagePath', '/pages/tabBar/home/index');
							uni.setStorageSync('msgCurrent', 1)
							this.saveToken(e.data.userinfo.token)
							getHeartbeatAgain()
							this.getUserInfo()
							uni.reLaunch({
								url: '/pages/tabBar/home/index'
							})
							return
						} else {
							uni.showToast({
								title: e.msg,
								icon: 'none'
							})
						}
					})

				}).catch(err => {})
			},


			/**
			 * 注册表单提交
			 * @param {Object} ref
			 */
			regSubmit(ref) {
				this.$refs[ref].validate().then(res => {
					const {
						REGISTER
					} = this.$api
					sendMessage({
						flag: REGISTER,
						content: {
							type: '1', //1手机号注册，2谷歌账号，3脸书账号
							code: '666666',
							username: this.regForm.username,
							password: this.regForm.password,
							invited: this.regForm.invited
						}
					})
					uni.$once(REGISTER, (e) => {
						uni.showToast({
							title: e.msg,
							icon: 'none'
						})
						if (e.code !== 1) return
						this.saveActiveTab(0)
						uni.setStorageSync('curMenuPagePath', '/pages/tabBar/home/index');
						uni.setStorageSync('msgCurrent', 1);
						this.saveToken(e.data.userinfo.token);
						// 重新获取心跳 注册成功后的页面金额会有问题
						getHeartbeatAgain()
						this.getUserInfo()
						uni.reLaunch({
							url: '/pages/tabBar/home/index'
						})
					})
				}).catch(err => {})
			},

			async authRegister() {
				const res = authRegisterApi(this.regForm)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100vw;
		position: relative;
		box-sizing: border-box;
		background: var(--bg-image-3) center no-repeat;
		background-size: 100% 100%;
		min-height: 100vh;


		.title {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			font-size: 40rpx;
			color: #fff;
		}
	}

	.small {
		background: var(--bg-image-4) center no-repeat;
		background-size: 100% 100%;
	}

	.isPC {
		display: flex;
		justify-content: center;
	}

	.auth-page {
		display: flex;
		align-items: center;
		justify-content: center;

		.uni-forms {
			width: 488px;

			/deep/.uni-forms-item .is-required {
				display: none !important;
			}

			/deep/.uni-forms-item__label {
				padding: 0 !important;
			}

			/deep/.uni-input-input {
				color: #fff !important;
				height: 50px;
			}

			/deep/ .uni-easyinput__placeholder-class {
				font-size: 16px !important;
				color: var(--color-18) !important;
			}

			/deep/.is-input-error-border .uni-easyinput__placeholder-class {
				color: var(--color-18) !important;
				font-weight: 600 !important;
				font-size: 16px !important;
				line-height: 24px;
				font-family: Ubuntu-Medium, Helvetica Neue, Condensed, DisplayRegular, Helvetica, Arial;
			}

			/deep/.uniui-eye-filled::before {
				color: #fff;
				font-size: 25px;
			}

			/deep/.uni-easyinput__content,
			.is-input-border {
				background: var(--bg-21) !important;
				border-radius: 12px !important;
				height: 50px;
				border: none !important;
			}

			.uni-forms-item {
				margin-bottom: 38px;

				.arearCode-wrap {
					width: 90px;
					display: flex;
					align-items: center;
					position: relative;
					cursor: pointer;

					.triangle {
						position: absolute;
						top: 40%;
						right: 8px;
						width: 0;
						height: 0;
						border: 6px solid transparent;
						border-top-color: #1f1f2c;
						transition: all .3s;
						margin-left: 10px;

					}

					.triangle-rotate {
						transform: rotate(-180deg);
					}

					.arear-pupup {
						position: absolute;
						top: 48px;
						left: 0;
						max-height: 500px;
						width: auto;
						border: 2px solid #2e363f;
						z-index: 3;
						border-radius: 12px;
						background: #20262D;
						overflow-y: scroll;

						.item {
							min-width: 130px;
							max-width: 390px;
							padding: 10px 20px;
							color: #fff;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							box-sizing: border-box;
						}

						.item:hover {
							width: auto;
							background-color: rgb(62, 67, 65);
							color: #adadc2;
						}
					}
				}

				.for-arear {
					width: 100%;
				}

				.verify-wrap {
					display: flex;
					align-items: center;
					position: relative;

					.xz-code-wrap {
						position: absolute;
						right: 4px;
						top: 4px;
						border-radius: 8px;
						overflow: hidden;
					}
				}
			}
		}

		.submit-btn {
			color: var(--color-20);
			height: 50px;
			line-height: 50px;
			background: var(--bg-23);
			border-radius: 200px;
			font-size: 36rpx;
			font-weight: bold;
			box-shadow: var(--box-shadow-color-3);
		}

		.btn-with {
			font-size: 23px;
			margin: 30px 60rpx;
		}

		.tips {
			text-align: center;
			margin-top: 20px;
			color: #BBC1D0;

			.tips-color {
				cursor: pointer;
				margin-left: 20rpx;
				color: var(--color-19);
			}
		}

		.forget {
			display: flex;
			justify-content: flex-start;
			margin-top: 10px;
			color: #fff;
			font-size: 14px;
			cursor: pointer;
			z-index: 9999;
			z-index: 1;
		}

		.auth-right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			box-sizing: border-box;

			.right-ball1 {
				position: absolute;
				right: -105px;
				top: -105px;
				width: 210px;
				height: 210px;

			}

			.right-ball2 {
				width: 250px;
				height: 250px;
				position: absolute;
				left: -135px;
				bottom: 0px;
			}



			.close-page {
				position: absolute;
				right: 24px;
				top: 32px;
				width: 40px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background-color: #2b333b;
				border-radius: 8px;
				cursor: pointer;
				box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
			}

			.login-type {
				width: 100%;
				padding-left: 15px;
				box-sizing: border-box;

				.active {
					font-size: 70rpx;
					line-height: 82rpx;
				}
			}



			.default {
				color: var(--color-16);
				font-size: 30px;
				line-height: 38px;
				font-family: PoetsenOne-Regular, PoetsenOne;
			}

			.continue {
				width: 100%;
				margin-bottom: 30px;
				color: var(--color-17);
				font-size: 40rpx;
				padding-left: 15px;
				box-sizing: border-box;
			}
		}

		.auth-right-bg {
			background: var(--bg-22);
			// height: 856px;
			border-radius: 30px 30px 30px 30px;
		}
	}

	.bg-shadow {
		box-shadow: var(--box-shadow-color-2);
	}

	.sent-btn {
		position: absolute;
		right: 10px;
		width: 55px;
		height: 35px;
		background-color: #2b333b;
		color: #fff;
		border-radius: 5px;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
		overflow: hidden;

		.send {
			width: 55px;
			height: 35px;
			line-height: 35px;
			text-align: center;
			border-radius: 5px;
		}
	}

	.popup-forgot {
		padding: 20px;
		border-radius: 12px;
		overflow: hidden;
		background: #1E232A;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;

			.header-l {
				display: flex;
				align-items: center;

				image {
					width: 24px;
					height: 24px;
				}

				.title {
					color: #fff;
					font-size: 16px;
					margin-left: 10px;
				}
			}

			.forClose {
				cursor: pointer;
			}
		}

		.uni-forms-item {
			margin-bottom: 20px !important;
			border-radius: 0 !important;

			/deep/.uni-easyinput__content,
			.is-input-border {
				border-radius: 0 !important;
			}
		}
	}

	/* 整个滚动条. */
	::-webkit-scrollbar {
		width: 2px;
	}

	/*  滚动条轨道 */
	::-webkit-scrollbar-track {
		background-color: transparent;
	}

	/*  滚动条上的滚动滑块 */
	::-webkit-scrollbar-thumb {
		background-color: #fff;
		border-radius: 6px;
	}

	button::after {
		border: none;
	}
</style>